<!--课程类型维护-->
<template>
  <div class="assessment-container">
<div class="search-container">
            <div class="search-container-right">
        <!--        <div class="export-button" @click="showExportReportDialog = true">-->
        <!--          <img src="../../../assets/assessment/icon-export.png" alt=""/>-->
        <!--          <span>导出分项成绩单</span>-->
        <!--        </div>-->
        <!--        <div class="export-button" @click="saveTding">-->
        <!--          <img src="../../../assets/assessment/icon-export.png" alt=""/>-->
        <!--          <span>导出总评成绩单</span>-->
        <!--        </div>-->
        <div class="import-button">
          <span class="el-icon-circle-plus-outline">添加新教材</span>
        </div>
      </div>
</div>
    <div class="plan-entry-table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="kcflmc" label="课程分类名称" align="center">
        </el-table-column>
        <el-table-column prop="qy" align="center">
          <template slot-scope="scope" slot="header">
            <div>禁用/启用</div>
          </template>
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.qy"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sc" label="删除" align="center">
          <template>
            <button
              style="
                width: 54px;
                height: 27px;
                background: #ffefef;
                border: 1px solid #fa5339;
                border-radius: 4px;
                font-size: 14px;
                color: #ff3819;
              "
            >
              删除
            </button>
          </template>
        </el-table-column>
        <el-table-column prop="cmm" label="重命名" width="292" align="center">
          <template>
            <button
              style="
                width: 54px;
                height: 27px;
                background: #fff6ef;
                border: 1px solid #f3b815;
                border-radius: 4px;
                font-size: 14px;
                color: #f3b815;
              "
            >
              重命名
            </button>
          </template>
        </el-table-column>
        <el-table-column prop="tjxjfl" label="添加下级分类" align="center">
          <template>
            <button
              style="
                width: 54px;
                height: 27px;
                background: #f1f8fe;
                border: 1px solid #51aef6;
                border-radius: 4px;
                font-size: 14px;
                color: #51aef6;
              "
            >
              新增
            </button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
      </div>
    </div>
    <div class="button-group">
      <div class="" @click="getsubmit('完成')">完成</div>
      <div class="" @click="getsubmit('取消')">取消</div>
    </div>
    <el-dialog
      title="专业必修课排序"
      :visible.sync="showManualEntryDialog"
      width="50%"
      class="ts"
    >
      <div>
        <transfer
          :leftData="leftData"
          :rightData="rightData"
          @transfer="handleTransfer"
          @handleSort="handleSort"
        >
        </transfer>
      </div>
      <div class="button-group">
        <div class="" @click="getsubmit('保存')">保存</div>
        <div class="" @click="getsubmit('取消')">取消</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Transfer from "../../../components/transfer/Transfer.vue"
export default {
  name: "index",
  components: {
    Transfer,
  },
  data() {
    return {
      showManualEntryDialog: false,
      rightData: [
        { name: "专业基础", id: 1 },
        { name: "专业方向", id: 2 },
        { name: "专业背景", id: 3 },
        { name: "科学文化", id: 3 },
      ],
      tableData: [
        {
          id: 1,
          kcflmc: "必修课",
          children: [
            {
              id: 11,
              kcflmc: "专业必修课",
              children: [
                {
                  id: 111.1,
                  kcflmc: "专业基础",
                },
                {
                  id: 111.2,
                  kcflmc: "专业方向",
                },
                {
                  id: 111.3,
                  kcflmc: "专业背景",
                },
                {
                  id: 111.4,
                  kcflmc: "科学文化",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    px() {},
    //排序弹窗
    handleTransfer(type, data, callback) {
      if (type == "left") {
        this.rightData = this.rightData.concat(this.leftData[data]);
      } else {
        this.leftData = this.leftData.concat(this.rightData[data]);
      }
      this[type + "Data"].splice(data, 1);
      callback(type);
    },
    handleSort(type, sortType, data, callback) {
      if (!sortType || sortType == "right") {
        if (type == "up") {
          this.rightData = this.swapItems(this.rightData, data[1], data[1] - 1);
          callback(sortType, [data[0], data[1] - 1]);
        } else {
          this.rightData = this.swapItems(this.rightData, data[1], data[1] + 1);
          callback(sortType, [data[0], data[1] + 1]);
        }
      } else if (sortType == "left") {
        if (type == "up") {
          this.leftData = this.swapItems(this.leftData, data[0], data[0] - 1);
          callback(sortType, [data[0] - 1, data[1]]);
        } else {
          this.leftData = this.swapItems(this.leftData, data[0], data[0] + 1);
          callback(sortType, [data[0] + 1, data[1]]);
        }
      } else if (sortType == "both") {
        if (type == "up") {
          data[0] == 0
            ? ""
            : (this.leftData = this.swapItems(
                this.leftData,
                data[0],
                data[0] - 1
              ));
          data[1] == 0
            ? ""
            : (this.rightData = this.swapItems(
                this.rightData,
                data[1],
                data[1] - 1
              ));
          callback(sortType, [
            data[0] == 0 ? data[0] : data[0] - 1,
            data[1] == 0 ? data[1] : data[1] - 1,
          ]);
        } else {
          data[0] == this.leftData.length - 1
            ? ""
            : (this.leftData = this.swapItems(
                this.leftData,
                data[0],
                data[0] + 1
              ));
          data[1] == this.rightData.length - 1
            ? ""
            : (this.rightData = this.swapItems(
                this.rightData,
                data[1],
                data[1] + 1
              ));
          callback(sortType, [
            data[0] == this.leftData.length - 1 ? data[0] : data[0] + 1,
            data[1] == this.rightData.length - 1 ? data[1] : data[1] + 1,
          ]);
        }
      }
    },
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
  },
};
</script>
<style lang="less" scoped>
.assessment-container {
  .el-dialog {
    height: auto;
    .el-scrollbar {
      width: 100%;
      height: auto;
      border: 1px solid #004ca7;
      border-radius: 4px;
      .el-radio {
        margin-top: 5px;
      }
    }
  }
  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;

      .el-radio {
        margin-right: 79px;
      }
    }

    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }

  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;

      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }

        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }

        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;

          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;

            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }

          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 76px;

      .green {
        padding: 1px 17px;
      }
    }
  }

  .manual-entry-container {
    .el-dialog__body {
      > div {
        width: 1014px;
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;

        > div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);

          &:last-child {
            border-bottom: none;
          }

          > div {
            display: flex;

            > div {
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:nth-child(1) {
                width: 420px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
                background: rgba(77, 129, 192, 0.1);
              }

              &:nth-child(2) {
                padding-left: 19px;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 43px;
    }

    .dialog-footer {
      > button {
        width: 87px;
        height: 36px;
        background: #fff6ef;
        border: 1px solid #f3b815;
        border-radius: 6px;
        background: rgba(255, 246, 239, 1);
        font-size: 18px;
        color: #f3b815;
      }
    }
  }

  .manual-entry-containerass {
    .el-dialog__body {
      > div {
        width: 1014px;
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;

        > div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);

          &:last-child {
            border-bottom: none;
          }

          > div {
            display: flex;

            > div {
              width: 900px;
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:nth-child(1) {
                width: 420px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
                background: rgba(77, 129, 192, 0.1);
              }

              &:nth-child(2) {
                padding-left: 19px;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 43px;
    }

    .dialog-footer {
      > button {
        width: 87px;
        height: 36px;
        background: #fff6ef;
        border: 1px solid #f3b815;
        border-radius: 6px;
        background: rgba(255, 246, 239, 1);
        font-size: 18px;
        color: #f3b815;
      }
    }
  }
}

.plan-entry-table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .lucj-import-button {
    .export-button;
    width: 116px;
    margin: 0 auto 12px;
    background: #f1fff8;
    border: 1px solid #02c86c;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #02c86c;
    }
  }

  .lucj-expot-button {
    .export-button;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 81px;
    margin: 0 auto 12px;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #f3b815;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/print-entry.less";

.plan-entry-table-container {
  margin-top: 30px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
.button-group {
  // margin-top: 50px;
  text-align: center;

  > div {
    display: inline-block;
    font-size: 18px;
    padding: 6px 22px;
    border-radius: 6px;

    &:nth-child(1) {
      color: #f3b815;
      border: 1px solid #f3b815;
      background: #fff6ef;
      margin-right: 139px;
    }

    &:nth-child(2) {
      color: #ff3819;
      border: 1px solid #ff3819;
      background: #ffefef;
    }
  }
}
</style>
